<template>
  <div>
<canvas id="canvas" tabindex="0"></canvas>

  </div>
</template>

<!-- css部分 -->
<style>
  #canvas{
    width: 100px;
    height: 100px;
    background-color: #b1b149;
  }
  #canvas:focus{
    outline: none;
  }
</style>

<!-- js部分 -->
<script>
window.onload = function() {
  // 画布的长宽
  const canvas = document.getElementById('canvas')
  const canvasWidth = canvas.clientWidth
  const canvasHeight = canvas.clientHeight
  // 在画布上移动的方块的长宽
  const [rectWidth, rectHeight] = [40, 40]
  // 方块的横纵坐标
  let [rectX, rectY] = [0, 0]
  // 初始化
  canvas.width = canvasWidth
  canvas.height = canvasHeight
  let context = canvas.getContext('2d')
  // 给方块设置颜色和初始坐标（中心点），绘制
  context.fillStyle = 'green'
  rectX = (canvasWidth - rectWidth) / 2
  rectY = (canvasHeight - rectHeight) / 2
  context.fillRect(rectX, rectY, rectWidth, rectHeight)

  // canvas元素上监听键盘输入事件
  canvas.addEventListener('keydown', doKeyDown, true)
  canvas.focus() // 让canvas聚焦

  function clearCanvas() {
    context.clearRect(0, 0, canvasWidth, canvasHeight)
  }

  function doKeyDown(e) {
    // 获取keyCode
    const keyCode = e.keyCode ? e.keyCode : e.which

    // 向上箭头 / w，让纵坐标向上移动10
    if (keyCode === 38 || keyCode === 87) {
      clearCanvas()
      rectY -= 10
      if (rectY < 0) {
        rectY = 0
      }
      context.fillRect(rectX, rectY, rectWidth, rectHeight)
    }

    // 向下箭头 / s，让纵坐标向下移动10
    if (keyCode === 40 || keyCode === 83) {
      clearCanvas()
      rectY += 10
      if (rectY > canvasHeight - rectHeight) {
        rectY = canvasHeight - rectHeight
      }
      context.fillRect(rectX, rectY, rectWidth, rectHeight)
    }

    // 向左箭头 / a，让纵坐标向左移动10
    if (keyCode === 37 || keyCode === 65) {
      clearCanvas()
      rectX -= 10
      if (rectX < 0) {
        rectX = 0
      }
      context.fillRect(rectX, rectY, rectWidth, rectHeight)
    }

    // 向右箭头 / d，让纵坐标向右移动10
    if (keyCode === 39 || keyCode === 68) {
      clearCanvas()
      rectX += 10
      if (rectX > canvasWidth - rectWidth) {
        rectX = canvasWidth - rectWidth
      }
      context.fillRect(rectX, rectY, rectWidth, rectHeight)
    }
  }		  
}
</script>


<template>
	<div>
		<canvas ref="myCanvas" width="200" height="200" id="myCanvas"></canvas>
	</div>
</template>

<script>
export default {
	data () {
		return {

		}
	},
	mounted () {
		this.onBullConnect()
	},
	methods: {
		onBullConnect() {
			var canvas = this.$refs.myCanvas
			let ctx = canvas.getContext("2d")
			// 画布的宽度高度
			// ctx.width = document.documentElement.clientWidth - 10
			// ctx.height = document.documentElement.clientHeight
			// ctx.width = 800
			// ctx.height = 600
			
			function Ball () {
				// 宽高
				this.x = parseInt(Math.random() * canvas.width)
				this.y = parseInt(Math.random() * canvas.height)
				this.r = 10
				this.color = "yellow"
				// 设置行进方向
				this.dx = parseInt(Math.random() * 10) - 5
				this.dy = parseInt(Math.random() * 10) -5
				ballArr.push(this)
				// 自己在数组中的位置记录一下
				this.index = ballArr.length - 1
			}
			// 小球的更新
			Ball.prototype.update = function() {
				this.x += this.dx
				this.y += this.dy
				// 当小球出屏幕，反弹，判断小于this.r是为了判断当前是否出屏幕
				if (this.x < this.r || this.x > (canvas.width -this.r)) {
					this.dx = -this.dx
				}
				if (this.y < this.r || this.y > (canvas.height-this.r)) {
					this.dy = -this.dy
				}
			}
			// 小球的渲染
			Ball.prototype.rander = function() {
				ctx.beginPath()
				// 透明度
				ctx.globalAlpha = 1
				// 画小球
				ctx.arc(this.x,this.y,this.r, 0, Math.PI * 5, false)
				ctx.fillStyle = this.color
				ctx.fill()

				
			}
			var ballArr = []
			// 创建20个小球
			for (var i = 0;i <1; i++) {
				new Ball()
			}
			// 定时器动画
			setInterval(function () {
				// 清除画布
				ctx.clearRect(0,0,canvas.width,canvas.height)
				for (var i = 0;i<ballArr.length;i++) {
					ballArr[i].update()
					ballArr[i].rander()
				}
			},20)
		}
	}
}
</script>

<style>
canvas {
	display: block;
	margin: 0 auto;
	border: 1px solid rgb(43, 37, 37);
}
</style>



